<page-header [action]="phActionTpl">
  <ng-template #phActionTpl>
    <button (click)="add()" nz-button nzType="primary">新建</button>
  </ng-template>
</page-header>
<nz-card>
  <div [ngStyle]="{'padding':'10px'}">
    <nz-input-group nzSearch [nzAddOnAfter]="suffixIconButton">
      <input type="text" nz-input placeholder="搜索标题关键字" [(ngModel)]="keywords" />
    </nz-input-group>
    <ng-template #suffixIconButton>
      <button (click)="handleSearch($event)" nz-button nzType="primary" nzSearch><i nz-icon nzType="search"></i></button>
    </ng-template>
  </div>
  <nz-table #ajaxTable
            nzShowSizeChanger
            [nzFrontPagination]="false"
            [nzData]="listOfData"
            [nzLoading]="loading"
            [nzTotal]="total"
            [(nzPageIndex)]="pageIndex"
            [(nzPageSize)]="pageSize"
            (nzPageIndexChange)="searchData()"
            (nzPageSizeChange)="searchData(true)">
    <thead>
      <tr>
        <th>编号</th>
        <th>封面</th>
        <th>标题</th>
        <th>视频大小</th>
        <th>时长</th>
        <th>分辨率</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let data of ajaxTable.data">
        <td>{{ data.videoId }}</td>
        <td><img src="{{ data.coverUrl }}?width=80&height=80&mode=crop" [ngStyle]="{'max-width':'80px','max-height':'80px'}" /></td>
        <td width="250px">
          <ellipsis lines="2" tooltip>{{  data.title }}</ellipsis>
        </td>
        <td>{{ (data.size/1024/1024).toFixed(2) }} MB</td>
        <td>{{ data.duration }} 秒</td>
        <td>{{ data.width }}x{{ data.height }}</td>
        <td nzRight="0px">
          <a nz-popconfirm nzTitle="您确定要删除吗?" (nzOnConfirm)="deleteItem(data.videoId,$event)">删除</a>
        |
          <a (click)="handlePreview(data.videoUrl,$event)">播放</a>
        </td>
      </tr>
    </tbody>
  </nz-table>
  <nz-modal [nzVisible]="previewVisible"
            [nzContent]="modalContent"
            [nzFooter]="null"
            (nzOnCancel)="previewVisible = false">
    <ng-template #modalContent>
      <video [src]="videoUrl" [ngStyle]="{ width: '100%',maxHeight:'600px' }" controls="controls" autoplay="autoplay"></video>
    </ng-template>
  </nz-modal>
</nz-card>
